import React, { Component, Fragment } from "react";
// 路由规则
import Admin from "../../router/Admin";
// 组件元素
import { Layout, Menu, Modal, message } from "antd";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
// 组件样式
import "../../assets/layout.css";
// logo
import logo from "../../assets/aaa.jfif";
// import minlogo from "../../assets/bbb.jpg";
// axios 发送请求
import url from "../../config/url";
import req from "../../http/req";

import { Link } from "react-router-dom";

// hoc 
import CheckLogin from "../../hoc/CheckLogin"

import { connect } from "react-redux";

// 组件标签
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
class Dashboard extends Component {
  state = {
    collapsed: false,
    selectedKey: [this.props.location.pathname],
    openKey: [this.props.location.pathname.split("/").splice(0, 3).join("/")]
  };
  acl = JSON.parse(sessionStorage.getItem("acl"));
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    return (
      <Layout style={{ height: "100%" }}>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" style={{ textAlign: "center" }}>
            {!this.state.collapsed ? (
              <img src={logo} alt="汉江孤影" style={{ height: "88px" }} />
            ) : (
              <img src={logo} alt="傲立雪中" style={{ height: "88px" }} />
            )}
          </div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={this.state.selectedKey} defaultOpenKeys={this.state.openKey}>
            {this.acl.map((el) => {
              return el.children.length > 0 ? (
                <SubMenu key={el.auth_path} title={el.auth_name}>
                    { el.children.map(ele =>{
                        return ele.is_nav ? (
                            <Menu.Item key={ele.auth_path}>
                                <Link to={ele.auth_path}>{ele.auth_name}</Link>
                            </Menu.Item>
                         ) : (
                            <Fragment key={ele.auth_path}></Fragment>
                        )
                    })}  
                </SubMenu>
              ) : (
                <Menu.Item key={el.auth_path}>
                    <Link to={el.auth_path}>{el.auth_name}</Link>
                </Menu.Item>
              );
            })}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{ paddingLeft: 24 }}
          >
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: this.toggle,
              }
            )}
            <span style={{ paddingLeft: "20px" }}>
              您好，{this.state.uname}！上次登录于{this.state.addr}（
              {this.state.ip}）[<span onClick={this.confirm}>注销登录</span>]
            </span>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
            }}
          >
            <Admin />
          </Content>
        </Layout>
      </Layout>
    );
  }
  //   获取当前管理员信息
  componentDidMount() {
    req.get(url.GetAdminInfo).then((res) => {
      if (res.data.errNo === 0) {
        this.setState(
          {
            uname: res.data.accountInfo.username,
            ip: res.data.accountInfo.last_ip,
            addr:
              res.data.accountInfo.last_login_addr.state +
              " " +
              res.data.accountInfo.last_login_addr.isp,
          },
          () => this.props.setAdmin(this.state)
        );
      }
    });
  }
  confirm = () => {
    Modal.confirm({
      title: "请确认操作",
      icon: <ExclamationCircleOutlined />,
      content: "您是否确认需要注销本次登录？",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        sessionStorage.removeItem("jwt");
        sessionStorage.removeItem("acl");
        message.success("注销成功", 2, () => {
          this.props.history.push("/login");
        });
      },
    });
  };
}

function mapStateToProps(state) {
  // map对象 转成 js对象
  return state.toJS()
}

function mapDispatchToProps(dispatch) {
  return {
    setAdmin(state) {
      let username = state.uname;
      let isAdmin = state.uname === "admin" ? true : false;
      dispatch({ type: "set", payload: { isAdmin, userInfo: { username } } });
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CheckLogin(Dashboard))
